<template>
  <div class="pd-20">
    <el-button type="primary"
               @click="handleOption('add', null)">新 增</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:name="{row}">
        <label v-for="(item, index) in row.list"
               :key="index"
               style="padding-right:10px;">
          <el-tag type="danger">{{item}}</el-tag>
        </label>
      </template>
      <template v-slot:isExpiration="{row}">
        <el-tag type="success"
                v-if="row.isExpiration === 0">未过期</el-tag>
        <el-tag type="danger"
                v-if="row.isExpiration === 1">已过期</el-tag>
        <el-tag type="info"
                v-if="row.isExpiration === 2">投放中</el-tag>
        <el-tag type="success"
                v-if="row.isExpiration === 3">已到期</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('isUp', row)">
          <span v-if="row.isUp === 0">上架</span>
          <span v-if="row.isUp === 1">下架</span>
        </el-button>
        <el-button type="primary"
                   @click="handleOption('edit', row)">编 辑</el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删 除</el-button>
        <el-button type="info"
                   @click="handleOption('print', row)">打印统计</el-button>
      </template>
    </element-table>
    <ticket-dialog-page :dataObj="dataObj"
                        v-if="ticketDialog"
                        :visible.sync="ticketDialog"></ticket-dialog-page>
  </div>
</template>
<script>
  import ElementTable from '@/base/ElementTable'
  import ticketDialogPage from './ticketDialog'
  export default {
    name: 'ticket', // 小票广告管理
    data () {
      return {
        loading: false,
        ticketDialog: false,
        tableData: [],
        columns: [
          {
            label: '广告投放机构',
            prop: 'name',
            width: 500,
            isSlot: true
          }, {
            label: '投放广告数',
            prop: 'count',
            align: 'center',
            width: 100
          }, {
            label: '发布时间',
            prop: 'pushTime',
            align: 'center',
            width: 200,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.pushTime), 'yyyy-MM-dd hh:mm:ss')
            }
          }, {
            label: '投放截止日期',
            prop: 'expirationTime',
            align: 'center',
            width: 200,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.expirationTime), 'yyyy-MM-dd hh:mm:ss')
            }
          }, {
            label: '投放状态',
            prop: 'isExpiration',
            align: 'center',
            isSlot: true,
            width: 120
          }, {
            label: '上下架',
            prop: 'isUp',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.isUp === 1 ? '已上架' : '已下架'
            }
          }, {
            label: '操作',
            prop: 'option',
            align: 'center',
            isSlot: true,
            width: 350
          }
        ],
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        dataObj: {}
      }
    },
    methods: {
      async getList () {
        this.loading = true;
        const { data: res } = await this.post(this.api.promote.adList);
        if (res.code === '200') {
          this.loading = false;
          this.tableData = res.object.map(item => ({
            ...item,
            list: item.name.split(',')
          }));
          this.pageTotal = res.totalNum;
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
      async handleOption (op, row) {
        switch (op) {
          case 'isUp':
            const { type, pushTime, expirationTime, isUp } = row;
            let tipText = isUp === 0 ? '上架' : '下架';
            this.$confirm(`确认${tipText}？`)
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.isUp, {
                  type: type,
                  pushTime: pushTime,
                  expirationTime: expirationTime,
                  isUp: isUp === 1 ? 0 : 1
                })
                if (res.code === '200') {
                  this.$message.success(`${tipText}成功!`);
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
          case 'add':
            this.dataObj = null;
            this.ticketDialog = true;
            break;
          case 'edit':
            this.dataObj = Object.assign({}, row);
            this.ticketDialog = true;
            break;
          case 'del':
            this.$confirm('确认删除？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.delAdvertising, row)
                if (res.code === '200') {
                  this.$message.success('删除成功!');
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
          case 'print':
            let params = { pushTime: row.pushTime, type: row.type };
            this.$router.push({ name: 'ticketEcharts', query: { routeParams: JSON.stringify(params) } });
            break;
        }
      }
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': ElementTable,
      'ticket-dialog-page': ticketDialogPage
    }
  }
</script>
<style scoped lang="scss">
</style>